export class UI{
    constructor(game){
        this.game=game;
        this.font='25px LiShu  '
        this.heartImg=document.getElementById('heart')
    }
    draw(context){
        context.font=this.font;
        context.fillStyle='black'
        context.fillText(`Score:${this.game.score}`,20,50)
        context.fillText(`Time:${(this.game.timer*0.001).toFixed(1)}`,20,90)
        for(let i=0;i<this.game.heart;i++){
            context.drawImage(this.heartImg,20*(i+1),110,20,20)
        }

        if(this.game.gameOver){
            context.textAlign='center'
            if(this.game.score>30){
                context.font='30px LiShu';
                context.fillText(`Good Job!  Your score is ${this.game.score}`,this.game.width*0.5,this.game.height*0.5)
            }else{
                context.font='30px LiShu';
                context.fillText(`Try again, adventurer`,this.game.width*0.5,this.game.height*0.5)
            }
        }
    }
}